<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>File Converts</title>
		<link rel="icon" href="images/favicon.ico">
		<!-- vue -->
		<script src="vue/vue.js"></script>
		<!-- 自定义 -->
		<link rel="stylesheet" type="text/css" href="css/shouyie.css">
		<!-- elementui -->
		<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
		<!-- bootstrap样式 -->
		<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
		<script src="bootstrap/bootstrap.min.js"></script>
		<script src="bootstrap/popper.min.js"></script>
		<script src="bootstrap/bootstrap.bundle.min.js"></script>
		<!-- 一定要先导入vue再导入elementui -->
		<script src="js/jquery.min.js"></script>
		<script src="element-ui/lib/index.js"></script>
		<script type="module">
			new Vue({
				el: '#app',
				data: {
					logo: "images/filetranslogo.gif",
					download: [{
						version: "下载v1.0",
						link: "https://www.fntop.cn/converts-v1.exe",
					
					}, {
						version: "下载v2.0",
						link: "https://www.fntop.cn/converts-v2.exe",
					
					}, {
						version: "下载v3.0",
						link: "https://www.fntop.cn/converts-v3.exe",
					
					}],
					name: "File Converts",
					active: 3,
					copyright: "Copyright © 2023 cn.fntop",
					baseUrl: "http://converts.fntop.cn/converts",
					beian: "赣ICP备2023002035号",
					headData: [{
						href: "index.html",
						remark: "首页"
					}, {
						href: "md.html",
						remark: "使用说明"
					}, {
						href: "contact.html",
						remark: "联系我们"
					}, {
						href: "member.html",
						remark: "会员"
					}],
					footData: [{
						title: "微信",
						href: "#",
						img: "images/wx.jpg",
						imgClass: "QR_code",
						target: "_self",
						sub: []
					}, {
						title: "公众号",
						href: "#",
						img: "images/public.png",
						imgClass: "QR_code",
						target: "_self",
						sub: []
					}, {
						title: "微信赞赏",
						href: "#",
						img: "images/wxnicepay.png",
						imgClass: "QR_code",
						target: "_self",
						sub: []
					}, {
						title: "微信群",
						href: "#",
						img: "images/wxgroup.png",
						imgClass: "QR_code",
						target: "_self",
						sub: []
					}, {
						title: "Gitee",
						href: "https://gitee.com/FnTop",
						imgClass: "",
						img: "",
						target: "_blank",
						sub: []
					}, {
						title: "CSDN",
						href: "https://blog.csdn.net/qq_40673786?spm=1010.2135.3001.5343",
						imgClass: "",
						img: "",
						target: "_blank",
						sub: []
					}, {
						title: "简体中文",
						href: "#",
						img: "",
						sub: [{
							title: "简体中文",
							href: "#",
							target: "_self",
							img: "",
							sub: []
						}, {
							title: "繁体中文",
							href: "#",
							target: "_self",
							img: "",
							sub: []
						}, {
							title: "english",
							href: "#",
							target: "_self",
							img: "",
							sub: []
						}]
					}],
					pickerOptions: {
						shortcuts: [{
							text: '一天',
							onClick(picker) {
								const date = new Date(picker.value);
								date.setTime(date.getTime() + 3600 * 1000 * 24);
								picker.$emit('pick', date);
							}
						}, {
							text: '一个月',
							onClick(picker) {
								const date = new Date(picker.value);
								date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
								picker.$emit('pick', date);
							}
						}, {
							text: '一年',
							onClick(picker) {
								const date = new Date(picker.value);
								date.setTime(date.getTime() + 3600 * 1000 * 24 * 30 * 12);
								picker.$emit('pick', date);
							}
						}, {
							text: '永久',
							onClick(picker) {
								const date = new Date(picker.value);
								date.setTime(date.getTime() + 3600 * 1000 * 24 * 30 * 12 * 100);
								picker.$emit('pick', date);
							}
						}]
					},
					formData: {
						sign: "",
						appId: "",
						ownedMachines: 1,
						owned:0,
						actived:0,
						username: "",
						phone: "",
						level: "0",
						isAdmin: "N",
						never: "N",
						expiredTime: new Date(),
						keyword: "",
						isCreate: "N",
						isDelay: "N",
						isIncrease: "N",
						showModal: "",
						title: "",
						btTitle: ""
					},
					result: []
				},
				methods: {
					verifySign: function() {
						var that = this
						if (that.formData == 'undefined' || that.formData.sign == "") {
							that.formData.showModal = ""
							that.$message({
								message: '权限码不能为空',
								type: 'warning'
							});
							return false;
						} else {
							that.formData.showModal = '#showModal'
							return true;
						}
					},
					showModal: function(option) {
						var that = this
						if (!that.verifySign()) {
							return;
						}
						if (option == 'create') {
							that.formData.isCreate = "Y"
							that.formData.isDelay = "N"
							that.formData.isIncrease = "N"
							that.formData.title = "新增用户"
							that.formData.btTitle = "新增"
						} else if (option == 'delay') {
							that.formData.isCreate = "N"
							that.formData.isDelay = "Y"
							that.formData.isIncrease = "N"
							that.formData.title = "进行延期"
							that.formData.btTitle = "延期"
						} else if (option == 'increase') {
							that.formData.isCreate = "N"
							that.formData.isDelay = "N"
							that.formData.isIncrease = "Y"
							that.formData.title = "新增台数"
							that.formData.btTitle = "新增"
						}
					},
					formatDate: function(date) {
						var that = this
						var date = new Date(date);
						var formattedDate = date.getFullYear() + "-" + that.pad(date.getMonth() + 1) + "-" + that
							.pad(date.getDate()) + " " + that.pad(date.getHours()) + ":" + that.pad(date
								.getMinutes()) + ":" + that.pad(date.getSeconds());
						return formattedDate;
					},
					pad: function(number) {
						return number < 10 ? '0' + number : number;
					},
					commit: function() {
						var that = this
						if (!that.verifySign()) {
							return;
						}
						var data = {}
						var baseUrl = ""
						if (that.formData.isCreate == "Y") {
							data = {
								sign: that.formData.sign,
								appId: that.formData.appId,
								ownedMachines: that.formData.ownedMachines,
								username: that.formData.username,
								phone: that.formData.phone,
								isAdmin: that.formData.isAdmin,
								level: that.formData.level,
								never: that.formData.never,
								expiredTime: that.formatDate(that.formData.expiredTime)
							}
							baseUrl = that.baseUrl + '/admin/create'

						} else if (that.formData.isDelay == "Y") {
							data = {
								sign: that.formData.sign,
								appId: that.formData.appId,
								level: that.formData.level,
								isAdmin: that.formData.isAdmin,
								never: that.formData.never,
								expiredTime: that.formatDate(that.formData.expiredTime)
							}
							baseUrl = that.baseUrl + '/admin/delay'

						} else if (that.formData.isIncrease == "Y") {
							data = {
								sign: that.formData.sign,
								appId: that.formData.appId,
								ownedMachines: that.formData.ownedMachines
							}
							baseUrl = that.baseUrl + '/admin/increase'
						}
						$.ajax({
							url: baseUrl,
							type: 'POST',
							sslVerify: false,
							withCredentials: true,
							contentType: 'application/json', // 设置请求的Content-Type为JSON  
							data: JSON.stringify(data),
							success: function(res) {
								if (res.code == "0") {
									alert(res.data)
								} else if (res.code == "500") {
									alert(res.msg)
								} else {
									alert("权限不足")
								}
							},
							error: function(xhr, status, error) {
								alert("权限不足")
							}
						});
					},
					getUser: function() {
						var that = this
						if(that.formData.appId!=""){
							var data = {
								appId: that.formData.appId
							};
							$.ajax({
								url: that.baseUrl + '/admin/get',
								type: 'POST',
								sslVerify: false,
								withCredentials: true,
								contentType: 'application/json',
								// dataType: 'json',
								data: JSON.stringify(data),
								success: function(res) {
									if (res.code == "0") {
										var user=res.data
										that.formData.owned=user.ownedMachines
										that.formData.actived=user.activedMachines
										that.formData.isAdmin=user.isAdmin
										that.formData.never=user.never
										that.formData.level=user.level
										that.formData.expiredTime=user.expiredTime
									} else if (res.code == "500") {
										alert(res.msg)
									} 
								},
								error: function(xhr, status, error) {
									alert("权限不足")
								}
							});
						}
						
					},
					query: function() {
						var that = this
						if (!that.verifySign()) {
							return;
						}
						var data = {
							sign: that.formData.sign,
							keyword: that.formData.keyword
						};
						$.ajax({
							url: that.baseUrl + '/admin/list',
							type: 'POST',
							sslVerify: false,
							withCredentials: true,
							contentType: 'application/json',
							// dataType: 'json',
							data: JSON.stringify(data),
							success: function(res) {
								if (res.code == "0") {
									that.result = res.data
								} else if (res.code == "500") {
									alert(res.msg)
								} else {
									alert("权限不足")
								}
							},
							error: function(xhr, status, error) {
								alert("权限不足")
							}
						});
					}
				}
			});
		</script>
	</head>
	<body>
		<div id="app">
			<!--头部-->
			<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top shadow-lg bg-body-tertiary"
				data-bs-theme="dark">
				<div class="container-fluid" style="margin-left: 12%;">
					<a class="navbar-brand" href="index.html">
						<img :src="logo" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
						{{name}}
					</a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
						data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
						aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav me-auto mx-2">
							<div v-for="(item,index) in headData">
								<li class="nav-item">
									<a :class="active==index?'nav-link active':'nav-link'"
										:href="item.href">{{item.remark}}</a>
								</li>
							</div>
						</ul>
						<form class="d-flex" style="margin-right: 12%;" role="search">
							<a class="btn btn-outline-success ms-3" v-for="item in download" :href="item.link"
								type="submit">{{item.version}}</a>
						</form>
					</div>
				</div>
			</nav>
			<!--核心-->
			<div class="container">

				<div class="row" style="margin-top: 68px;">
					<div class="col">
						<!-- 操作组 -->
						<div class="row g-2">
							<div class="col-md-3">
								<label for="validationTextarea" class="form-label">权限码</label>
								<input ref="sign" class="form-control" id="validationTextarea" @blur="verifySign()"
									v-model="formData.sign" />
							</div>
							<div class="col-md-3">
								<label for="inputEmail4" class="form-label">关键字查找</label>
								<input type="text" class="form-control" v-model="formData.keyword" id="inputEmail4">
							</div>
						</div>

						<div class="col-md-12 mt-3">
							<el-button type="success" plain round icon="el-icon-search" @click="query">查询</el-button>
							<el-button type="success" plain round icon="el-icon-plus"
								:data-bs-target="formData.showModal" data-bs-toggle="modal"
								@click="showModal('create')">注册</el-button>
							<el-button type="success" plain round icon="el-icon-timer"
								:data-bs-target="formData.showModal" data-bs-toggle="modal"
								@click="showModal('delay')">延期</el-button>
							<el-button type="success" plain round icon="el-icon-upload2"
								:data-bs-target="formData.showModal" data-bs-toggle="modal"
								@click="showModal('increase')">新增台数</el-button>
						</div>
						<!-- 表格数据 -->
						<div class="row mt-4">
							<div class="col">
								<table class="table  table-striped table-bordered" >
									<thead>
										<tr>
											<th class="text-certer" scope="col">用户id</th>
											<th class="text-certer" scope="col">用户名</th>
											<th scope="col">用户昵称</th>
											<th scope="col">用户手机号</th>
											<th scope="col">用户账号</th>
											<th scope="col">拥有台数</th>
											<th scope="col">已激活台数</th>
											<th scope="col">会员等级</th>
											<th scope="col">是否管理</th>
											<th scope="col">过期时间</th>
											<th scope="col">创建时间</th>
											<th scope="col">更新时间</th>
										</tr>
									</thead>
									<tbody>
										<tr v-if="result.length!=0" v-for="item in result">
											<td>{{item.id}}</td>
											<td>{{item.username}}</td>
											<td>{{item.nick}}</td>
											<td>{{item.phone}}</td>
											<td>{{item.appId}}</td>
											<td>{{item.ownedMachines}}</td>
											<td>{{item.activedMachines}}</td>
											<td v-if="item.level=='2'">至尊会员</td>
											<td v-else-if="item.level=='1'">普通会员</td>
											<td v-else>试用用户</td>
											<td>{{item.isAdmin}}</td>
											<td>{{item.never=='N'?item.expiredTime:'永久'}}</td>
											<td>{{item.createdTime}}</td>
											<td>{{item.updatedTime}}</td>
										</tr>
										<tr v-if="result.length==0" class="text-center">
											<td colspan="13">暂无数据</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<!-- 模态 -->
						<div class="modal fade" id="showModal" tabindex="-1" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h1 class="modal-title fs-5" id="exampleModalLabel">{{formData.title}}</h1>
										<button type="button" class="btn-close" data-bs-dismiss="modal"
											aria-label="Close"></button>
									</div>
									<div class="modal-body">
										<form class="was-validated">
											<div class="mb-3" v-if="formData.isDelay=='Y' || formData.isIncrease=='Y'">
												<label for="validationTextarea"
													class="col-sm-2 col-form-label">APPID</label>
												<input class="form-control" id="validationTextarea" placeholder=""
													value="" @blur="getUser" v-model="formData.appId"></textarea>
											</div>
											<div class="mb-3" v-if="formData.isCreate=='Y'">
												<label for="validationTextarea" class="col-form-label">用户名</label>
												<input class="form-control" id="validationTextarea" placeholder=""
													v-model="formData.username"></textarea>
												<div class="invalid-feedback">
													用户名必须输入
												</div>
											</div>
											<div class="mb-3" v-if="formData.isCreate=='Y'">
												<label for="validationTextarea" class="col-form-label">手机号</label>
												<input class="form-control" id="validationTextarea" placeholder=""
													v-model="formData.phone"></textarea>
												<div class="invalid-feedback">
													手机号必须输入
												</div>
											</div>
											<div class="mb-3" v-if="formData.isCreate=='Y' || formData.isDelay=='Y'">
												<label for="validationTextarea" class="col-form-label">会员等级</label>
												<select class="form-select" aria-label="select example"
													v-model="formData.level">
													<option value="0">试用用户</option>
													<option value="1">普通会员</option>
													<option value="2">至尊会员</option>
												</select>
												<div class="invalid-feedback">请选择</div>
											</div>
											<div class="mb-3" v-if="formData.isCreate=='Y' || formData.isDelay=='Y'">
												<label for="validationTextarea" class="col-form-label">是否管理员</label>
												<select class="form-select" aria-label="select example"
													v-model="formData.isAdmin">
													<option value="Y">是</option>
													<option value="N">否</option>
												</select>
												<div class="invalid-feedback">请选择</div>
											</div>


											<div class="mb-3" v-if="formData.isCreate=='Y' || formData.isDelay=='Y'">
												<label for="validationTextarea" class="col-form-label">是否永久</label>
												<select class="form-select" aria-label="select example"
													v-model="formData.never">
													<option value="Y">是</option>
													<option value="N">否</option>
												</select>
												<div class="invalid-feedback">请选择</div>
											</div>
											<div class="mb-3" v-if="formData.isIncrease=='Y'">
												<label for="customRange3"
													class="form-label">拥有台数：{{formData.owned}}</label>
												<input type="range" class="form-range range-track-bg"
													v-model="formData.owned" data-bs-theme="dark" min="1"
													max="99999" step="1">
											</div>
											<div class="mb-3" v-if="formData.isIncrease=='Y'">
												<label for="customRange3"
													class="form-label">已激活台数：{{formData.actived}}</label>
												<input type="range" class="form-range range-track-bg"
													v-model="formData.actived" data-bs-theme="dark" min="1"
													max="99" step="1">
											</div>
											<div class="mb-3" v-if="formData.isCreate=='Y' || formData.isIncrease=='Y'">
												<label for="customRange3"
													class="form-label">购买台数：{{formData.ownedMachines}}</label>
												<input type="range" class="form-range range-track-bg"
													v-model="formData.ownedMachines" data-bs-theme="dark" min="1"
													max="99" step="1">
											</div>

											<div class="mb-3" v-if="formData.isCreate=='Y' || formData.isDelay=='Y'">
												<div class="block">
													<div class="demonstration">过期时间</div>
													<el-date-picker class="mt-2" v-model="formData.expiredTime"
														type="datetime" placeholder="选择日期时间" size="large" align="right"
														:picker-options="pickerOptions">
													</el-date-picker>
												</div>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary"
											data-bs-dismiss="modal">Close</button>
										<button type="button" class="btn btn-success"
											@click="commit()">{{formData.btTitle}}</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--4.页脚部分开始-->
			<div class="row mt-5 fixed-bottom">
				<div class="col">
					<div class="footer">
						<ul class="uu">
							<span v-for="item in footData">
								<li :class="item.sub.length!=0?'flast':'QR_father'">
									<a :target="item.target" :href="item.href">
										<img :class="item.imgClass" :src="item.img" v-if="item.img!==''" />
										{{item.title}}
										<ul class="languagefrom" v-if="item.sub!=null">
											<li v-for="subitem in item.sub">
												<a :target="subitem.target" :href="subitem.href">
													{{subitem.title}}
												</a>
											</li>
										</ul>
									</a>
								</li>
							</span>
						</ul>
						<p>
							{{copyright}} <br /> {{beian}}
						</p>
					</div>
				</div>
			</div>
		</div>
		</div>
	</body>
</html>